"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";

// Mock client logos for demo purposes
const CLIENT_LOGOS = [
  {
    name: "TechCorp",
    logo: "TC"
  },
  {
    name: "Innovate AI",
    logo: "IA"
  },
  {
    name: "FutureSoft",
    logo: "FS"
  },
  {
    name: "DataFlow",
    logo: "DF"
  },
  {
    name: "Quantum Systems",
    logo: "QS"
  },
  {
    name: "Neural Networks Inc",
    logo: "NN"
  },
  {
    name: "Global AI Solutions",
    logo: "GAS"
  },
  {
    name: "Enterprise Tech",
    logo: "ET"
  }
];

export function ClientsCarousel() {
  const [index, setIndex] = useState(0);
  
  // Auto-scroll every 3 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((prevIndex) => (prevIndex + 1) % Math.ceil(CLIENT_LOGOS.length / 4));
    }, 3000);
    
    return () => clearInterval(interval);
  }, []);
  
  return (
    <div className="w-full overflow-hidden py-4">
      <motion.div
        className="flex space-x-8"
        animate={{
          x: `-${index * 100}%`
        }}
        transition={{
          ease: "easeInOut",
          duration: 0.8
        }}
      >
        {CLIENT_LOGOS.map((client, i) => (
          <div
            key={i}
            className="flex-shrink-0 h-16 w-32 rounded-lg bg-slate-800/50 flex items-center justify-center backdrop-blur-sm border border-slate-700"
          >
            <div className="text-lg font-bold text-[#50E3C2]">{client.logo}</div>
            <div className="sr-only">{client.name}</div>
          </div>
        ))}
      </motion.div>
      <div className="flex justify-center mt-6 space-x-2">
        {Array.from({ length: Math.ceil(CLIENT_LOGOS.length / 4) }).map((_, i) => (
          <button
            key={i}
            className={`h-2 w-2 rounded-full ${
              i === index ? "bg-[#50E3C2]" : "bg-slate-700"
            }`}
            onClick={() => setIndex(i)}
            aria-label={`Go to slide ${i + 1}`}
          />
        ))}
      </div>
    </div>
  );
} 